<template>
  <el-row class="login-page">
    <el-col class="bg">
      <el-row class="logo"></el-row>
      <el-row class="form login">
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="registerDataRules"
          status-icon
          label-width="auto"
          class="demo-ruleForm"
          v-if="isRegister"
        >
          <h1>注册</h1>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="ruleForm.phone"
              type="phone"
              :prefix-icon="User"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="ruleForm.password"
              type="password"
              autocomplete="off"
              :prefix-icon="Lock"
            />
          </el-form-item>
          <el-form-item label="请再次输入密码" prop="checkPass">
            <el-input
              v-model="ruleForm.checkPass"
              type="password"
              autocomplete="off"
            />
          </el-form-item>

          <el-form-item label="请选择身份">
            <el-select placeholder="请选择" v-model="ruleForm.roleId">
              <el-option
                v-for="c in role"
                :key="c.id"
                :label="c.name"
                :value="c.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button class="button" type="primary btn" @click="submitForm()">
              注册
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="button" type="primary btn" @click="resetForm()"
              >取消</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-link type="info" :underline="false" @click="isRegister = false">
              ← 返回
            </el-link>
          </el-form-item>
        </el-form>
        <el-form
          ref="form"
          size="large"
          v-model="ruleForms"
          autocomplete="off"
          v-else
        >
          <el-form-item>
            <h1>登录</h1>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="ruleForms.phone"
              type="phone"
              :prefix-icon="User"
              placeholder="请输入用户名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              name="password"
              v-model="ruleForms.password"
              :prefix-icon="Lock"
              type="password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="请选择身份">
            <el-select placeholder="请选择" v-model="ruleForms.roleId">
              <el-option
                v-for="c in role"
                :key="c.id"
                :label="c.name"
                :value="c.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="flex">
            <div class="flex">
              <el-checkbox>记住我</el-checkbox>
              <el-link type="primary" :underline="false">忘记密码？</el-link>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
              class="button"
              type="primary btn"
              auto-insert-space
              @click="submitForms"
              >登录</el-button
            >
          </el-form-item>
          <el-form-item class="flex">
            <el-link type="info" :underline="false" @click="isRegister = true">
              注册 →
            </el-link>
          </el-form-item>
        </el-form>
      </el-row>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background-image: url("@/assets/back.jpg");
    /* 替换为你的图片路径 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */

    .logo {
      width: 430px;
      height: 500px;
      flex: 0 0 auto;
      /* 禁止伸缩和收缩，自动基线对齐 */
      // background-image: url("@/assets/logo2.png");
      /* 替换为你的图片路径 */
      background-position: center;
      background-repeat: no-repeat;
      background-color: #00b96b;
      opacity: 0.9;
    }

    .login {
      width: 500px;
      height: 500px;
      flex: 0 0 auto;
      /* 禁止伸缩和收缩，自动基线对齐 */
      background-color: #fff;
      padding: 35px;
    }

    .form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      user-select: none;

      .title {
        margin: 0 auto;
      }

      .button {
        width: 100%;
      }

      .login {
        background: #00b96b;
      }

      .flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }

      .btn {
        background-color: #00b96b;
      }
    }
  }
}
</style>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { zhuce, denglu, shenfen } from "@/api/user.js";
import { useTokenStore } from "@/stores/token.js";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
//定义路游器
const router = useRouter();
const role = ref([]);
//role分类
const rolename = async () => {
  let fenlei = await shenfen(ruleFormRef);
  role.value = fenlei.shuju;
};

const isRegister = ref(false);
const ruleForm = ref({});
//登录
const ruleForms = ref({});
// const
// 数据校验判断输入的密码是否正确
const rePasswordValid = (rule, value, callback) => {
  if (value == null || value == "") {
    return callback(new Error("请再次确认密码"));
  }
  if (ruleForm.value.password !== value) {
    return callback(new Error("两次输入密码不一致"));
  }
};
//用于注册的表单校验模型
const registerDataRules = ref({
  phone: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 5, max: 16, message: "用户名的长度必须为5~16位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 5, max: 16, message: "密码长度必须为5~16位", trigger: "blur" },
  ],
  checkPass: [{ validator: rePasswordValid, trigger: "blur" }],
});
//注册的方法
const ruleFormRef = ref(null);
rolename();

const submitForm = async () => {
  let zc = await zhuce(ruleForm);
  if (zc.flag) {
    ElNotification.success("注册成功");
    isRegister.value = false
  } else {
    ElNotification.error("注册失败");
  }
};
//登录的方法
const submitForms = async () => {
  rolename();
  let Result = await denglu(ruleForms);
  if (Result.flag) {
    localStorage.setItem("uid",Result.shuju.id);
    if (Result.shuju.roleId == 2) {
      ElNotification.success("登录成功");
      router.push("/mercxq");
    } else if (Result.shuju.roleId == 1) {
      // 司机跳转router.push("/")
    }else{
      ElNotification.error("登录失败");
    }
  } else {
    ElNotification.error("登录失败");
  }
};
</script>
